<template>
    <div>
        <a-card v-access="'abc'" class="mb1 filterForm">
            <a-form layout="inline" :model="filterForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                <a-form-item label="账号">
                    <a-input v-model:value="filterForm.accout" />
                </a-form-item>
                <a-form-item label="流水号">
                    <a-input v-model:value="filterForm.age" />
                </a-form-item>
                <a-form-item label="交易单号">
                    <a-input v-model:value="filterForm.age" />
                </a-form-item>
                <a-form-item label="流水号">
                    <a-input v-model:value="filterForm.name" />
                </a-form-item>
                <a-form-item label="交易时间">
                    <a-range-picker v-model:value="filterForm.date" />
                </a-form-item>
                <a-form-item label="交易类型">
                    <a-select v-model:value="filterForm.type">
                        <a-select-option value="1">充值</a-select-option>
                        <a-select-option value="2">退款</a-select-option>
                        <a-select-option value="3">提现</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
                    <a-button type="primary" @click="filterData">搜索</a-button>
                    <a-button class="ml1" type="primary" @click="exportData">导出</a-button>
                </a-form-item>
            </a-form>
        </a-card>
        <a-table :scroll="{ x: 1300 }" :columns="columns" :data-source="tableData" :pagination="pagination">
            <template #time="{ text }">{{$filters.formatTime(text)}}</template>
            <template #action="{ record }">
                <span>
                    <a @click="deleteRecord(record.id)">删除</a>
                    <a-divider type="vertical" />
                    <a>详细</a>
                </span>
            </template>
        </a-table>
        
        <loading />
    </div>
</template>
<script lang="ts">
import { defineComponent,reactive, toRefs,computed,UnwrapRef,toRaw,createVNode} from 'vue';
import { Modal,message } from 'ant-design-vue';
import JsExportExcel from 'js-export-excel';
interface filterState{  //筛选字段
    name:string,
    age:number|undefined,
    address:string
}
interface dataType{ //其他类型设置
    current:number,
    total:number,
}
interface FormState{   //提交表格限制
    
}

const columns = [
    {title: '流水号',align:"center",dataIndex: 'tradeId',key: 'tradeId',},
    {title: '交易时间',align:"center",dataIndex: 'tradeTime',key: 'tradeTime',slots: { customRender: 'time' }},
    {title: '交易类型',align:"center",dataIndex: 'tradeType',key: 'tradeType',},
    {title: '交易渠道',align:"center",key: 'tradeChannelName',dataIndex: 'tradeChannelName'},
    {title: '资金形式',align:"center",key: 'fundTypeName',dataIndex: 'fundTypeName'},
    {title: '交易单号',align:"center",key: 'billId',dataIndex: 'billId'},
    {title: '备注',width:200,align:"center",key: 'desc',dataIndex: 'desc'},
    {title: '操作',fixed: 'right',align:"center",key: 'action',slots: { customRender: 'action' }},
];

const tableData:object[] = [];
for (let i = 0; i < 30; i++) {
    tableData.push({
        key: i,
        tradeId: 315123006340920,
        tradeTime: 1623059908,
        tradeType:'PAY',
        tradeChannelName:"用户余额",
        fundTypeName: '现金',
        billId:"2021060370301220",
        desc:"云服务器ECS-按量付费",
    })
}

export default defineComponent({
    setup() {
        const data=reactive<dataType>({
            current: 1,
            total:0,
        })
        const filterForm:UnwrapRef<filterState>=reactive({  //筛选表格
            name:"",
            age:undefined,
            address:""
        })

        const formData:UnwrapRef<FormState>=reactive({})  //提交表格
        const rules = {
            name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
            age: [{ required: true, message: '请输入年纪', trigger: 'blur' }],
            address: [{ required: true, message: '请选择地址', trigger: 'change', type: 'object' }],
        }

        const filterData=()=>{     //筛选操作
            console.log(toRaw(filterForm))
        }
        const deleteRecord=(id:number)=>{   //删除操作
            Modal.confirm({
                title: '温馨提示?',
                icon: createVNode(ExclamationCircleOutlined),
                content: '确定删除该项记录吗？',
                onOk() {
                    message.success('删除成功!') 
                },
            });
        }
        
        const exportData=()=>{   //导出数据
            interface optionType{
                fileName:string,
                datas:any
            }
            var option:optionType = {
                fileName:"",
                datas:[]
            };
            option.fileName = "orderList";
            option.datas = [
                {
                    sheetData: tableData,
                    sheetFilter: [],
                    sheetHeader: [],
                }
            ];
            for (const item of columns) {
                option.datas[0].sheetFilter.push(item.key)
                option.datas[0].sheetHeader.push(item.title)
            }
            var toExcel = new JsExportExcel(option); 
            toExcel.saveExcel();
        }

        const refData=toRefs(data)
        const pagination=computed(()=>({
            total: 100,
            current: 1,
            pageSize:30,
        }))
        return {
            ...refData,
            columns,
            tableData,
            pagination,
            filterForm,

            formData,
            rules,

            deleteRecord,
            filterData,
            exportData,
        };
    },
    components: {
        
    },
});
</script>
<style lang="scss" scoped>

</style>
